<template>
  <el-popover placement="bottom" :width="200" trigger="click">
    <template #reference>
      <el-button class="btnview" v-if="value != '新增'"
        ><span class="f13">{{ value }}</span>
        <el-icon class="el-icon-circle-close el-icon--right" @click="deleteAction"
          ><CircleClose /></el-icon
      ></el-button>

      <el-button class="btnview" v-else>
        <el-icon><Plus /></el-icon>
        <span class="f13">新增</span></el-button
      >
    </template>
    <el-row>
      <el-col :span="24">
        <el-select v-model="value" placeholder="请选择" @change="getOpValue" filterable>
          <el-option
            v-for="(item, index) in firstOptions"
            :key="index"
            :label="item.fieldName"
            :value="item.fieldName"
          >
          </el-option>
        </el-select>
      </el-col>
    </el-row>
  </el-popover>
</template>
  <script>
import { transCodeToStr } from './util.js'
export default {
  setup() {
    //动态加载css
    let cssPath="";
    let mode=localStorage.getItem("mode")
    if(mode=="dark"){
      cssPath = import("/src/assets/css/dark/index.scss");
    }else if(mode=="light"){
      cssPath = import("/src/assets/css/light/index.scss");
    }
    return {
      cssPath
    };
  },
  props: {
    tname: {},
    firstOptions: {},
    ctag: {}
  },
  data() {
    return {
      mode:localStorage.getItem("mode"),
      value: ''
    }
  },
  mounted() {
    this.value = this.tname
    // console.log("firstOptions======>",this.firstOptions)
    // console.log("ctag======>",this.ctag)
  },
  methods: {
    deleteAction(val) {
      this.$emit('deleteItem', this.ctag)
      // debugger
    },
    getOpValue(val) {
      var isAdd = false
      if (this.tname == '新增') {
        isAdd = true
      }
      var foundfield = this.firstOptions.find(function (item) {
        return item.fieldName === val
      })
      var pardata = {
        fieldClass: foundfield.fieldClass,
        fieldCode: foundfield.fieldCode,
        fieldName: foundfield.fieldName,
        fieldType: foundfield.fieldType,
        isItem: foundfield.isItem,
        alias: foundfield.fieldName
      }

      // debugger
      if (!isAdd) {
        // this.value = pardata.fieldName;
        this.$emit('editData', pardata, this.ctag + 1)
      } else {
        this.value = '新增'
        this.$emit('editData', pardata, '')
      }
    }
  }
}
</script>
  <style scoped>
/*@import './index.css';*/
.btnview {
  padding: 5px 10px;
  margin-right: 5px;
}
.f13 {
  font-size: 13px;
}
.el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: auto;
}
.el-button {
  margin-left: 0px !important;
  margin-right: 12px !important;
  margin-bottom: 5px !important;
}
</style>